<template>
  <div class="group_box">
    <div
      v-if="list.length > 1"
      class="link_line"
      :style="{
        width: linkLineWidth + 'px',
        left: linkLineLeft + 'px',
      }"
    ></div>
    <div v-if="list.length === 1 && level > 0" class="link_line_point"></div>
    <div
      v-for="(item, i) in list"
      :key="i"
      :id="`group_wrapper_${item.id}`"
      class="group_wrapper"
    >
      <div
        :class="{
          top_line: !!item.parentId,
          bottom_line: !!item.children,
        }"
        class="group_cell"
      >
        <el-popover placement="bottom" :width="200" trigger="click">
          <template #reference>
            <div class="cell_box">{{ item.name }}</div>
          </template>
          <div class="cell_box_drop">
            <div class="cell_box_drop_content">
              <div v-for="(item, i) in 8" :key="i" class="cell_box_drop_item">
                <UserAvatar :src="userInfo.avatarUrl" :size="30" />
                <div class="name_box">{{ userInfo.nickname }}</div>
                <el-button size="mini">修改</el-button>
              </div>
            </div>
          </div>
        </el-popover>
      </div>
      <GroupBox
        v-if="item.children && item.children.length"
        :list="item.children"
        :level="item.level"
      />
    </div>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  watch,
  computed,
  getCurrentInstance,
  onMounted,
  nextTick,
} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import UserAvatar from "../../../components/UserAvatar.vue";

export default {
  name: "GroupBox",
  components: { UserAvatar },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    level: {
      type: Number,
      default: 0,
    },
  },
  setup(props, context) {
    // ------------------ 通用属性 start --------------------
    console.log("getCurrentInstance() ==>", getCurrentInstance());
    const { proxy } = getCurrentInstance();
    const $api = proxy.$api;
    const router = useRouter();
    const store = useStore();
    // ------------------ 通用属性 end ----------------------

    const demoVar = ref(false);
    const demoArr = reactive([]);

    const childrenLeftList = ref([]);

    const linkLineWidth = ref(0);
    const linkLineLeft = ref(0);

    const itemRefs = [];
    const setItemRef = (el) => {
      if (el) {
        itemRefs.push(el);
      }
    };

    // 计算属性
    const userInfo = computed(() => store.state.user.userInfo);

    // 属性监听
    watch(
      () => props.demo,
      (newVal) => {
        ElMessage.success("this is a demo !");
      }
    );

    const demoMtd = () => {};

    // 组件钩子
    onMounted(() => {
      nextTick(() => {
        let lineWidth = 0;
        props.list.forEach((item, index) => {
          // item 即为对应的组件ref
          // 可通过 item 获取对应组件上的属性或方法
          const el = document.getElementById(`group_wrapper_${item.id}`);
          console.log("el ===>", el);
          if (index === 0 || index === props.list.length - 1) {
            lineWidth += el.offsetWidth / 2;
          } else {
            lineWidth += el.offsetWidth;
          }
          if (index === 0) {
            linkLineLeft.value = el.offsetWidth / 2 - 1;
          }
        });
        console.log("---------------------------");
        // 2 像素是为了衔接的更好
        linkLineWidth.value = lineWidth + 2;
        console.log("linkLineLeft ==>", linkLineLeft.value);
        console.log("linkLineWidth ==>", linkLineWidth.value);
      });
    });

    return {
      demoVar,
      demoArr,
      userInfo,
      demoMtd,
      childrenLeftList,
      setItemRef,
      linkLineWidth,
      linkLineLeft,
    };
  },
};
</script>

<style lang="less" scoped>
.group_box {
  text-align: center;
  position: relative;
  display: inline-flex;
  .group_wrapper {
    position: relative;
    padding: 0 20px;
    display: inline-flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
  }

  .group_cell {
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-top: 20px;
    margin-bottom: 20px;
    & + .group_cell {
      margin-left: 40px;
    }
    &.top_line::before {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 2px;
      background: #409eff;
      height: 20px;
      transform: translate(-50%, -100%);
    }
    &.bottom_line::after {
      display: block;
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 2px;
      background: #409eff;
      height: 20px;
      transform: translate(-50%, 100%);
    }
    .cell_box {
      display: inline-block;
      // white-space: nowrap;
      border: 1px solid #409eff;
      padding: 10px 20px;
      border-radius: 4px;
      width: 30px;
    }
  }

  .link_line {
    position: absolute;
    top: -1px;
    z-index: 0;
    height: 2px;
    width: 500px;
    box-sizing: border-box;
    background-color: #409eff;
  }

  .link_line_point {
    position: absolute;
    top: -1px;
    left: 50%;
    z-index: 0;
    height: 2px;
    width: 2px;
    transform: translateX(-50%);
    box-sizing: border-box;
    background-color: #409eff;
  }
}

.cell_box_drop {
  max-height: 400px;
  overflow: hidden auto;
  .cell_box_drop_item {
    display: flex;
    align-items: center;
    height: 40px;
  }
  .name_box {
    flex: 1;
    overflow: hidden;
    margin: 0 10px;
  }
}
</style>
